<template>
    <div class="admin-container">
        <el-container>
            <el-container>
                <el-aside :width="`${appStore.menuCollapse ? 0.64 : 2.2}rem`" style="height: 100vh">
                    <side-view></side-view>
                </el-aside>
                <el-container>
                    <el-header>
                        <header-view></header-view>
                    </el-header>
                    <div class="divider"></div>
                    <el-main>
                        <div class="tag-wrap">
                            <!-- <el-tag class="mr-4 pointer" key="Home" :type="'Home' == $route.name ? '' : 'info'"
                                effect="plain" @click="callClick({ fullName: 'Home', fullPath: '/home' })">首页</el-tag>
                            <el-tag v-for="tag in appStore.routeTags" :key="tag.fullName" class="mr-4 pointer"
                                :type="tag.fullName == $route.name || $route.meta.belong == tag.fullPath ? '' : 'info'"
                                closable effect="plain" @close="callClose(tag)" @click="callClick(tag)">
                                {{ tag.title }}
                            </el-tag> -->
                            <el-tabs v-model="editableTabsValue" type="card" closable class="header-tabs"
                                @tab-click="callClick" @tab-remove="callClose" @contextmenu.prevent="handleContextMenu">
                                <el-tab-pane key="Home" label="首页" name="Home" :disabled="true">
                                </el-tab-pane>
                                <el-tab-pane v-for="tag in appStore.routeTags" :key="tag.name" :label="tag.meta!.title"
                                    :name="tag.name">
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                        <div class="main-wrap" style="height: calc(100vh - 1.02rem);">
                            <!-- <icon-svg class="bg-corner bg-corner_1" name="con_bg_u1"></icon-svg>
                            <icon-svg class="bg-corner bg-corner_2" name="con_bg_u2"></icon-svg> -->
                            <img class="bg-corner bg-corner_1" src="../assets/imgs/con_bg_u1.png" />
                            <img class="bg-corner bg-corner_2" src="../assets/imgs/con_bg_u2.png" />
                            <div class="main-scroller">
                                <router-view v-slot="{ Component }">
                                    <keep-alive>
                                        <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
                                    </keep-alive>
                                    <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
                                </router-view>
                                <!-- <router-view></router-view> -->
                            </div>
                        </div>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
        <div v-show="actionPanelShow" class="tab_action_panel" :style="{ left: actionLeft + 'px', top: actionTop + 'px' }">
            <div class="tab_action_item" @click="actionClick('current')">关闭当前</div>
            <div class="tab_action_item" @click="actionClick('other')">关闭其他</div>
            <div class="tab_action_item" @click="actionClick('all')">关闭所有</div>
        </div>
    </div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import HeaderView from './HeaderView.vue'
import SideView from './SideView.vue';
import useApp from '@/store/app'

@Options({
    components: {
        HeaderView,
        SideView
    },
    watch: {
        $route(to, from) {
            console.log('【页面ID】' + `当前：${to.name}, 来自：${from.name}`);
            const hasRoute = this.appStore.routeTags.some(res => res.path === to.path)
            if (!hasRoute && to.name !== 'Home') {
                this.appStore.routeTags.push(to)
                this.aliveComponents.push(to.name)
            }

            if (hasRoute) {
                const index = this.appStore.routeTags.findIndex(res => res.path === to.path)
                this.appStore.routeTags.splice(index, 1, to)
            }

            this.editableTabsValue = to.name
            // if (this.$route.meta.belong) {
            //     const selectedTag = this.appStore.routeTags.find(tag => this.$route.meta.belong?.includes(tag.fullName))
            //     // selectedTag.meta.child = this.$route
            //     this.editableTabsValue = selectedTag.fullName
            //     sessionStorage.setItem('parentPage', this.editableTabsValue)
            // } else {
            //     this.editableTabsValue = to
            //     sessionStorage.removeItem('parentPage')
            // }

            // if (this.$route.meta.belong?.includes(from)) {
            //     this.editableTabsValue = from
            //     const ev: any = this.appStore.routeTags.find(tag => tag.fullName === from)
            //     ev.meta.child = this.$route
            //     sessionStorage.setItem('parentPage', from)
            // } else {
            //     this.editableTabsValue = to
            //     // const ev: any = this.appStore.routeTags.find(res => res.fullName === to)
            //     // ev.meta.realPath = undefined
            //     sessionStorage.removeItem('parentPage')
            // }
        }
    },
    mounted() {
        this.editableTabsValue = this.$route.name
        if (this.editableTabsValue !== 'Home') {
            this.appStore.routeTags = [this.$route]
        } else {
            sessionStorage.removeItem('breads')
        }
        this.appStore.defaultActive = this.$route.path
        // toPromise(() => this.appStore.menus, true).then((val) => {
        //     let hasFind = false
        //     const getActiveMenu = (routes) => {
        //         for (let i = 0; i < routes.length; i++) {
        //             if (hasFind) {
        //                 break
        //             }
        //             if (routes[i].fullPath === this.$route.path || this.editableTabsValue === routes[i].fullName) {
        //                 this.currentMenu = routes[i]
        //                 hasFind = true
        //                 break
        //             }
        //             if (routes[i].children) {
        //                 getActiveMenu(routes[i].children)
        //             }
        //         }
        //     }

        //     getActiveMenu(val)
        // })
        window.closePage = () => {
            this.appStore.routeTags = this.appStore.routeTags.filter(res => res.name !== this.$route.name)
        }

        document.body.addEventListener('click', () => {
            this.actionPanelShow = false
        })
    }
})
export default class MainView extends Vue {
    appStore = useApp()

    currentMenu: any

    editableTabsValue = ''

    aliveComponents: string[] = []

    actionLeft = 0

    actionTop = 0

    actionPanelShow = false

    // 点过右击之后的name
    contextHandleName = ''

    callClose(name) {
        let ev: any = this.appStore.routeTags.find(res => res.name === name)
        if (name === 'Home') {
            ev = { name: 'Home' }
        }
        const tagIndex = this.appStore.routeTags.findIndex(res => res.path === ev.path)

        // console.log('ev', ev);
        ev.meta.keepAlive = false

        if (this.appStore.routeTags.length === 1) {
            this.$router.replace({ path: '/home' })
            this.appStore.defaultActive = '/home'
            this.appStore.currentMenu = {}
            sessionStorage.setItem('breads', JSON.stringify([]))
        } else if (ev.name === this.$route.name) {
            if (tagIndex > 0) {
                const item = this.appStore.routeTags[tagIndex - 1]
                this.appStore.currentMenu = this.appStore.menusHistory.find(res => res.fullName === item.name) || {}
                this.appStore.defaultActive = item.path as string
                this.$router.replace(item)
            } else {
                // const item = this.appStore.routeTags[0]
                // this.appStore.currentMenu = item
                // this.appStore.defaultActive = item.fullPath as string
                // this.$router.replace({ path: item.fullPath as string })
                this.$router.replace({ path: '/home' })
                this.appStore.defaultActive = '/home'
                this.appStore.currentMenu = {}
                sessionStorage.setItem('breads', JSON.stringify([]))
            }
        }
        this.appStore.routeTags.splice(tagIndex, 1)
    }

    callClick(vc) {
        const name = vc.props.name
        let ev: any = this.appStore.routeTags.find(res => res.name === name)
        if (name === 'Home') {
            ev = { name: 'Home' }
        }
        if (ev.name !== 'Home') {
            this.appStore.currentMenu = this.appStore.menusHistory.find(res => res.fullName === ev.name) || {}
        } else {
            this.appStore.currentMenu = {}
            sessionStorage.setItem('breads', JSON.stringify([]))
        }

        this.appStore.defaultActive = ev.path

        this.$router.push(ev)
    }

    handleContextMenu(ev) {
        if (ev.target.className.includes('el-tabs__item')) {
            this.contextHandleName = ev.target.id.replace('tab-', '')
            this.actionPanelShow = true
            this.actionLeft = ev.pageX - ev.offsetX
            this.actionTop = ev.pageY - ev.offsetY + ev.target.clientHeight
        } else {
            this.actionPanelShow = false
        }
    }

    actionClick(type: string) {


        switch (type) {
            case 'current':
                // this.appStore.routeTags = this.appStore.routeTags.filter(res => res.name !== this.contextHandleName)
                this.callClose(this.contextHandleName)
                break;
            case 'other':
                this.appStore.routeTags = this.appStore.routeTags.filter(res => res.name === this.contextHandleName)
                this.callClick({ props: { name: this.contextHandleName } })
                break;
            case 'all':
                this.appStore.routeTags = []
                this.callClick({ props: { name: 'Home' } })
                break;
            default:
                break;
        }
        this.actionPanelShow = false
        this.contextHandleName = ''
    }

    handleTabsEdit() { }
}
</script>
<style lang="scss" scoped>
.tag-wrap {
    display: flex;
    align-items: center;
    background-color: #fff;
    height: 40px;
    padding: 0 10px;
    box-shadow: 0 2px 2px #e5e5e5;
    margin-bottom: 2px;
    overflow-x: auto;
    padding-top: 4px;

    :deep(.el-tabs__header) {
        margin: 0;
        border: 0;

        .el-tabs__nav {
            border: 0;
        }

        .el-tabs__item {
            border: 0;

            &.is-active {
                background-color: #2773ff11;
                border-radius: 16px 16px 0 0;
            }
        }
    }
}

.header-tabs {
    width: 100%;
}

.divider {
    height: 1px;
    background-color: #e5e5e5;
}

.main-wrap {
    background-color: #f3f7ff;
    position: relative;

    .main-scroller {
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        overflow-y: auto;
    }

    .bg-corner {
        position: absolute;

        opacity: 0.1;
        z-index: 0;

        &_1 {
            width: 360px;
            height: 360px;
            left: 0;
            top: 0;
        }

        &_2 {
            width: 320px;
            height: 320px;
            right: 0;
            bottom: 0;
        }
    }
}

.tab_action_panel {
    position: fixed;
    z-index: 1000;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 0 2px 2px #f5f5f5;
    // width: 100px;

    .tab_action_item {
        height: 40px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        padding: 0 10px;
        cursor: pointer;
        font-size: 12px;

        &:hover {
            color: $primary--color;
        }
    }
}
</style>